<!DOCTYPE html>
<html>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

<head>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div class="Content">
  <div class="top-picture">
     <img src="./img/0.jpg" style="width:100%"/>
       <div class="introduction">
            <p1>Hello,I'm 林芷欣</p1>
            <p2>---------前端</p2>
      </div>
  </div>
<div class="nav1">
   <ul>
      <li><a href="#jump1">基本信息</a></li>
      <li><a href="#jump2">性格爱好</a></li>
      <li><a href="#jumpto">专业技能</a></li>
      <li><a href="#jumpto">学习历程</a></li>
      <li><a href="#jump3">展示</a></li>
      <li><a href="#CONTACT">CONTACT</a></li>
   </ul>
</div>
  <div class="information">
      <div class="am" id="jump1">About Me</div>
      <div class="substance"><img src="./img/436190781212670774.jpg"><div class="content"><div class="name">姓名：林芷欣</div><br><div class="majar">性别：女<br>籍贯：广州</br>学院：数学与信息学院</br>年级专业：2015级信息管理与信息系统</br>出生年月：1997年6月24日<br></div></div></div>
  </div>
  <div class="flow">                                      <!--瀑布流-->
    <div class="words" id="jump2">hobby&characteristic&photo</div>
    <div class="box">
      <div class="pic">
         <img src="./img/1.png">
      </div>
    </div>
   <div class="box">
      <div class="pic">
         <img src="./img/2.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/3.png">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/4.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/5.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/6.png">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/7.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/8.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/9.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/10.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/11.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/12.png">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/13.png">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/14.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/15.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/16.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/17.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/18.jpg">
      </div>
    </div>
    <div class="box">
      <div class="pic">
         <img src="./img/19.jpg">
      </div>
    </div>
  </div>

  <div class="skill">
<div class="title" id="jumpto">Skill</div>
<div class="skills" style="font-size:20px;"><div style="width:30%;position:absolute;top:15px;left:20%">HTML</div> <!--进度条-->
<div class="loadbar">  
              <span class="bar"  style="width: 85%;">85%</span>  
</div>
</div>
<div class="skills" style="font-size:20px;"><div style="width:30%;position:absolute;top:15px;left:20%">CSS</div>
<div class="loadbar">  
              <span class="bar"  style="width: 85%;">85%</span>  
</div>
</div>
<div class="skills" style="font-size:20px;"><div style="width:30%;position:absolute;top:15px;left:20%">javascript</div>
<div class="loadbar">  
              <span class="bar"  style="width: 50%;">50%</span>  
</div>
</div>
<div class="skills" style="font-size:20px;"><div style="width:30%;position:absolute;top:15px;left:20%">css3</div>
<div class="loadbar">  
              <span class="bar"  style="width: 50%;">50%</span>  
</div>
</div>
<div class="skills" style="font-size:20px;"><div style="width:30%;position:absolute;top:15px;left:20%">HTML5</div>
<div class="loadbar">  
              <span class="bar"  style="width: 30%;">30%</span>  
</div>
</div>
  <nav class="nav">  <!--时间轴-->
    <div class="wrapper clearfix">

      <a href=""><br>2016年5月<br>初涉前端<br>开始在w3c和慕课网上<br>学习html和css</a>

      <a href=""><br>2016年6月<br>做考核任务<br>接触了node<br>尝试写get,post请求</a>

      <a href="">暑假<br>做暑假任务<br>继续学习html和css<br>并且开始接触css3和HTML5<br>以及一些JS</a>

      <a href=""><br>大二开学<br>开始系统地学习Js<br>通过慕课网<br>以及《js高级程序设计》</a> 
      <i class="dot"></i>
    </div>
  </nav>
<div class="SHOW"> <!--手动轮播图-->
  <div class="show" id="jump3">SHOW</div>
<div class="container">
  <div class="pictures" id="pictu" style="left:-400px;">
<img src="./img/d.png">
<img src="./img/e.png">
<img src="./img/d.jpg">
<img src="./img/f.png">
  </div>

</div>
 <div id="icon1"> <img src="./img/箭头左.png"></div>
 <div id="icon2">  <img src="./img/右箭头.png" ></div>
</div>
<div style="width:100%;text-align: center;padding-bottom: 20px;padding-top:15px;color:#a53535;">这些都是大二开始做的一些页面，大二开始尝试接触框架，比如在国庆期间用sui mobile来写手机端页面，感觉框架好好用<br>在接下来的日子里，会继续学习JS，还有JQ<br>虽然觉得css3真的很好用，对比JS可以节省好多行代码，但是兼容性还是有挺大问题的</div>
</div>

         <div class="end" id="CONTACT">
          <div class="box1">
            <h3>对HCI&前端</h3>
            <p><br>大一玩社团活动大二开始要收收心往自己的想要发展的方向靠拢，在各种技术中选择了前端并不只是因为他简单啊，其实我们都知道前端的水很深，入门容易进阶难啊，自己现在还在入门。<br><br>其实个人很清楚，进工作室的目的就是做项目，在项目中检验学习到的东西。有所耳闻HCI大神云集，希望能够进入HCI让大神带飞<br><br>我想和你们一起“浪费时间”</p>
          </div>
          <div class="box2">
            <h3>接下来的plan</h3>
            <p>以自己现在的能力，做起项目来还是会有N多问题，所以首要的计划就是继续学习，当然，学习的内容包括很多啊，先把js和jq啃下来，然后再去熟悉html5还有就是要多点接触框架，接下来还要学习Ajax估计这里也会懵挺久的。<br>
            感觉自己确定了要走前端这条路线之后，反而会挺多空余时间的，也希望自己能沉住气，越走越远</p>
          </div>
          <div class="box3">
            <h3>联系方式</h3>
            <p>电话：13416136637/696637</p>
            <p>微信：715337119</p>
            <p>邮箱：715337119@qq.com</p>
          </div> 
          </div>

       </div>
</div>

  <script type='text/javascript' src='./js/index.js' charset='utf-8'></script>
</body>
</html>